<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="../static/js/echarts.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 1200px;height:600px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option1 = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {
            },
            series: [
                {
                    name: '销量',
                    type: 'line',
                    smooth: true,
                    data: [5, 20, 36, 1000, 10, 20]
                }
            ]
        };
        option2 = {
            dataset: [
                {
                    source: [
                        ['Product', 'Sales', 'Price', 'Year'],
                        ['Cake', 123, 32, 2011],
                        ['Latte', 231, 14, 2011],
                        ['Tofu', 235, 5, 2011],
                        ['Milk Tee', 341, 25, 2011],
                        ['Porridge', 122, 29, 2011],
                        ['Cake', 143, 30, 2012],
                        ['Latte', 201, 19, 2012],
                        ['Tofu', 255, 7, 2012],
                        ['Milk Tee', 241, 27, 2012],
                        ['Porridge', 102, 34, 2012],
                        ['Cake', 153, 28, 2013],
                        ['Latte', 181, 21, 2013],
                        ['Tofu', 395, 4, 2013],
                        ['Milk Tee', 281, 31, 2013],
                        ['Porridge', 92, 39, 2013],
                        ['Cake', 223, 29, 2014],
                        ['Latte', 211, 17, 2014],
                        ['Tofu', 345, 3, 2014],
                        ['Milk Tee', 211, 35, 2014],
                        ['Porridge', 72, 24, 2014]
                    ]
                },
                {
                    transform: {
                        type: 'filter',
                        config: { dimension: 'Year', '<': 2018 }
                        // 这个筛选条件表示，遍历数据，筛选出维度（ dimension ）
                        // 'Year' 上值为 2011 的所有数据项。
                    }
                }
            ],
            series: {
                type: 'pie',
                datasetIndex: 0
            }
        };
        option3 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'cross' }
            },
            legend: {},
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: [
                        '1月',
                        '2月',
                        '3月',
                        '4月',
                        '5月',
                        '6月',
                        '7月',
                        '8月',
                        '9月',
                        '10月',
                        '11月',
                        '12月'
                    ]
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '降水量',
                    min: 0,
                    max: 250,
                    position: 'right',
                    axisLabel: {
                        formatter: '{value} ml'
                    }
                },
                {
                    type: 'value',
                    name: '温度',
                    min: 0,
                    max: 250,
                    position: 'left',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                }
            ],
            series: [
                {
                    name: '降水量',
                    type: 'bar',
                    yAxisIndex: 0,
                    data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]
                },
                {
                    name: '温度',
                    type: 'line',
                    smooth: true,
                    yAxisIndex: 1,
                    data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option2);
    </script>
</body>

</html>